<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      width="1200px"
      :title="$t('m.shelves.shelvestask')"
      :visible.sync="popupVisible"
      :before-close="close"
    >
      <!-- tool start -->
      <el-form align="left" ref="form" :model="detail" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('m.shelves.shelvestaskcode')">
              <el-input disabled v-model="detail.shelvestaskcode" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('m.tasknumber')">
              <el-input
                v-model.trim="inputTasknumber"
                @keyup.enter.native="validateTaskNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
          <el-form-item :label="$t('m.tasknumber')">
            <el-input disabled v-model="detail.shelvestaskdetail[0].tasknumber" autocomplete="off"></el-input>
          </el-form-item>
          </el-col>-->
          <el-col :span="8">
            <el-form-item :label="$t('m.page.location')">
              <el-input
                v-model="inputShelveslocationcode"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" align="right">
            <el-button type="primary" @click="save" :loading="btnLoading">{{$t('m.save')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- tool end -->

      <!-- table start -->
      <el-table ref="table" class="table-wrap" stripe empty-text fit :data="tableData">
        <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
        <el-table-column align="center" prop="tasknumber" :label="$t('m.tasknumber')"></el-table-column>
        <el-table-column align="center" prop="productspeccode" label="SKU"></el-table-column>
        <el-table-column align="center" prop="suppliercode" label="supplierCode"></el-table-column>
        <el-table-column align="center" prop="productname" :label="$t('m.in.productname')"></el-table-column>
        <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')"></el-table-column>
        <el-table-column align="center" prop="shelvesquantity" :label="$t('m.shelves.quantity')"></el-table-column>
        <el-table-column
          align="center"
          prop="shelveslocationcode"
          :label="$t('m.shelves.locationcode')"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="practicalquantity"
          :label="$t('m.shelves.practicalquantity')"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="practicallocationcode"
          :label="$t('m.shelves.practicallocationcode')"
        ></el-table-column>
      </el-table>
      <!-- table end -->
      <el-row>
        <el-col :span="24">
          <el-button @click="close">关闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 选择库位dialog start -->
    <locationListPopup
      v-if="locationListPopupVisible"
      :popupVisible="locationListPopupVisible"
      :config="locationConfig"
      @submit="setLocation"
      @close="locationListPopupVisible=false"
    ></locationListPopup>
    <!-- 选择库位dialog end -->
  </div>
</template>
<script>
export default {
  name:'shelvestask-popup',
  props:['popupVisible', 'detail'],
  data(){
    return {
      locationConfig:{}, // 需要传递给locations-list组件的参数
      locationListPopupVisible:false, // 控制选择库位dialog显示隐藏
      inputTasknumber:'',
      inputShelveslocationcode:'',
      practicallocationcode:'',
      tableData:[],
      permission:true, // 默认允许更改库位

      btnLoading:false // 控制按钮loading，防止重复提交
    }
  },
  components:{
    locationListPopup:() => import('@/components/common/location-list')
  },
  watch:{
    detail(){
      let data = this.detail.shelvestaskdetail
        ? JSON.parse(JSON.stringify(this.detail.shelvestaskdetail))
        : []
      if (data.length){
        let opt = { practicallocationcode:'' }
        this.$set(data, 0, Object.assign(data[0], opt))
        this.tableData = data
        // let tasknumber = this.detail.shelvestaskdetail[0].tasknumber // 后台返显的任务号
        // let shelveslocationcode = this.detail.shelvestaskdetail[0].shelveslocationcode // 后台返显的库位
      }
    }
  },
  methods:{
    showLocationList(){
      this.locationConfig = {
        url:'/locationinfo/list'
      }
      this.locationListPopupVisible = true
    },
    setLocation(location){
      this.inputShelveslocationcode= location.locationcode
      this.locationListPopupVisible = false
    },
    close(){
      this.inputTasknumber = this.inputShelveslocationcode = ''
      this.$emit('close')
    },
    validateTaskNumber(){
      let tasknumber = this.detail.shelvestaskdetail[0].tasknumber // 后台返显的任务号
      if (!this.inputTasknumber){
        this.callbackMessage(this.$t('m.enter') + this.$t('m.tasknumber'))
        return false
      }
      if (tasknumber !== this.inputTasknumber){
        this.inputTasknumber = ''
        this.callbackMessage(this.$t('m.shelves.match'))
        return false
      }
      return true
    },
    async save(){
      let result = this.validateTaskNumber()
      if (!result) return false

      let shelveslocationcode = this.detail.shelvestaskdetail[0]
        .shelveslocationcode // 后台返显的库位
      if (!this.inputShelveslocationcode)
        return this.callbackMessage(
          this.$t('m.enter') + this.$t('m.shelves.locationcode')
        )
      // 如果实际库位不等于目标库位
      if (shelveslocationcode !== this.inputShelveslocationcode){
        // await this.getPermission(this.inputShelveslocationcode)
        // if(this.permission){
        this.$confirm(this.$t('m.shelves.alert'), this.$t('m.noticemessage'), {
          confirmButtonText:this.$t('m.confirm'),
          cancelButtonText:this.$t('m.cancel'),
          type:'warning'
        })
          .then(() => {
            // 保存商品需要接收两个参数 practicallocationcode：实际库位；taskdetailid： 任务号
            let practicallocationcode = this.inputShelveslocationcode
            let taskdetailid = this.tableData[0].taskdetailid
            this.btnLoading = true
            this.update(practicallocationcode, taskdetailid)
          })
          .catch(() => {
            this.callbackMessage(this.$t('m.shelves.state3'), 'info')
          })
        // } else {
        //   this.inputShelveslocationcode = ''
        //   this.callbackMessage('上架库位已被占用')
        // }
      } else {
        this.btnLoading = true
        let taskdetailid = this.tableData[0].taskdetailid
        this.update(shelveslocationcode, taskdetailid)
      }
    },
    update(practicallocationcode, taskdetailid){
      let options = {
        method:'put',
        url:`/shelvestaskdetail/${taskdetailid}/puton`,
        params:{
          practicallocationcode,
          taskdetailid
        }
      }
      this.$axios(options).then(({ message }) => {
        this.btnLoading = false
        this.inputTasknumber = this.inputShelveslocationcode = ''
        this.$set(this.tableData,0,Object.assign(this.tableData[0], { practicallocationcode }))
        this.callbackMessage(message,'success')
        this.$emit('callback')
        this.close()
      }).catch(()=>{
        this.btnLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mgt22 {
  margin-top: 22px;
}
</style>